<template>
  <div>
    <el-drawer
      :with-header="false"
      :visible.sync="shoppingGoodsV"
      direction="ttb"
      size="80%"
    >
      <el-form
        ref="shoppingBill"
        :model="shoppingBill"
        label-width="auto"
        size="mini"
        inline
      >
        <el-divider>BILL-SUMMARY</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="supplyCompany" label="supplyCompany：">
              <el-input v-model="shoppingBill.supplyCompany"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"> </el-col>
        </el-row>
        <el-divider>MATERIAL-DETAIL</el-divider>

        <div>
          <el-button type="primary" size="mini" @click="delDetail"
            >删除</el-button
          >
          <el-button type="primary" size="mini" @click="addDetail"
            >添加</el-button
          >
        </div>
        <el-table
          ref="shoppingBillItems "
          :data="shoppingBill.shoppingBillItems"
          max-height="320px"
          border
          show-summary
          :summary-method="summaryMethod"
          @selection-change="(rows) => (selected = rows)"
        >
          <el-table-column
            type="index"
            align="center"
            label="--"
          ></el-table-column>
          <el-table-column type="selection" align="center"></el-table-column>

          <el-table-column align="left" width="256" label="编号">
            <template #default="{ row }">
              <el-link type="success" icon="el-icon-s-goods">{{
                row.goodsCode
              }}</el-link>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="品名"
            prop="goodsName"
            width="320"
          >
          </el-table-column>
          <el-table-column sortable width="150" prop="goodsPrice" label="单价">
            <template #default="{ row }">
              <el-form-item>
                <el-input-number
                  controls-position="right"
                  :precision="2"
                  type="number"
                  size="mini"
                  v-model="row.goodsPrice"
                ></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column sortable width="150" prop="quantity" label="数量">
            <template #default="{ row }">
              <el-form-item>
                <el-input-number
                  :precision="0"
                  type="number"
                  size="mini"
                  v-model="row.quantity"
                ></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="统计">
            <template #default="{ row }">
              <span>{{ row.goodsPrice * row.quantity }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-divider>OPERATOR-SIGN</el-divider>
        <el-descriptions border size="small">
          <el-descriptions-item label="申请人">
            <el-tag>{{ "匿名用户" }}</el-tag></el-descriptions-item
          >
          <el-descriptions-item label="审核人"></el-descriptions-item>
        </el-descriptions>

        <div>
          <el-button type="warning" icon="el-icon-remove" @click="reset"
            >重置
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="shoppingBillSubmit"
            >提交
          </el-button>
        </div>
      </el-form>
    </el-drawer>
    <shopping-goods-support
      ref="support"
      @post-select="postSelect"
    ></shopping-goods-support>
  </div>
</template>
<script>
import ShoppingGoodsSupport from "@/components/ShoppingGoodsSupport";
import { basic } from "@/api";
/**
 * 页面核心数据结构体说明文档
 * {
      "materialCode": "MT003",
      "materialLabel": "示波器",
      "suggestPrice": 256.66,
      "materialType": "machine"
    },
 {
            shoppingBillFk: "string",
            itemIndex: "2",
            goodsCode: "MT008",
            goodsName: "打印纸",
            goodsPrice: 4.0,
            quantity: 3,
          },
 *
 */
// import New from './components/New.vue';
export default {
  name: "ShoppingInsert",
  components: {
    ShoppingGoodsSupport,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      shoppingGoodsV: false,
      shoppingBill: {
        supplyCompany: "swagger器材供应有限公司",
        shoppingBillItems: [
          {
            shoppingBillFk: "string",
            itemIndex: "2",
            goodsCode: "MT008",
            goodsName: "打印纸",
            goodsPrice: 4.0,
            quantity: 3,
          },
        ],

        shoppingBillCode: "",
        amount: 0,
        updateTime: null,
        submitter: "",
        auditor: null,
        abandon: true,
        submitTime: "2022-05-11T01:44:16.547Z",
        shoppingState: "toSubmit",
        auditScore: 0,
        resubmitTimes: 0,
      },
      selected: [],
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    appear() {
      this.shoppingGoodsV = true;
    },
    addDetail() {
      this.$refs.support.appear();
    },

    delDetail() {
      let s = [];
      for (let item of this.shoppingBill.shoppingBillItems) {
        let l = false;
        for (let selectedDetail of this.selected) {
          if (item.itemIndex === selectedDetail.itemIndex) {
            l = true;
            break;
          }
        }
        if (!l) {
          s.push(item);
        }
      }
      this.shoppingBill.shoppingBillItems = s;
    },
    postSelect(supported) {
      let s = supported.map((x) => {
        return {
          shoppingBillFk: null,
          itemIndex: 0,
          goodsCode: x.materialCode,
          goodsName: x.materialLabel,
          goodsPrice: x.suggestPrice,
          quantity: 1,
        };
      });
      this.shoppingBill.shoppingBillItems.push(...s);
      this.shoppingBill.shoppingBillItems.forEach((x, i) => {
        x.itemIndex = i;
      });
    },
    summaryMethod({ columns, data }) {
      //column对象是 el-table-column代表的元信息列 如prop属性property 等
      //columns整体 为 List<column> 纵向
      //data 整体为List<row> 横向
      //理解好 row[column.property]
      const sums = [];
      sums[0] = "总";
      sums[columns.length - 1] = data.reduce((pre, cur) => {
        pre = pre + cur.goodsPrice * cur.quantity;
        return pre;
      }, 0);
      return sums;
    },
    shoppingBillSubmit() {
      /*     this.$http({
        method: "post",
        url: "http://localhost:9090/swimming/shopping/insert",
        data: this.shoppingBill,
      })*/
      basic.insert(this.shoppingBill).then(
        (res) => {
          this.$message.warning(JSON.stringify(res.data));
          this.reset();
          this.shoppingGoodsV = false;
          this.$emit("post-submit");
        },
        (error) => {
          console.log(".shoppingBill request error : " + error.response.status);
        }
      );
    },
    reset() {
      this.$refs.shoppingBill.resetFields();
      this.shoppingBill.shoppingBillItems = [];
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
    "shoppingBill.shoppingBillItems": {
      handler() {
        this.shoppingBill.shoppingBillItems.forEach((x, i) => {
          x.itemIndex = i;
        });
        this.$message.info(JSON.stringify(this.shoppingBill.shoppingBillItems));
      },
    },
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-drawer {
  .el-form {
    width: 1200px;
    margin-left: 260px;
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
